<template>
		<view class="charts">
			<f2 :init="initChart"  :charts="chartCopyData"/>
		</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	export default {
		name: 'ChartOneLine',
		props: {
			chartData: Object
		},
		data() {
			return {
			};
		},
		created() {
		},
		computed: {
					chartCopyData() {
						return this.chartData.data;
					}
				},
		components: {
			f2
		},
		methods: {
			initChart(F2, config) {
				const chart = new F2.Chart(config);
				chart.source(this.chartData.data);
				chart.axis(this.chartData.x, {
					tickLine: {
						lineWidth: 1,
						stroke: '#555555',
						length: 5,
						alignTick: false
					},
					line: {
					    lineWidth: 1,
					    stroke: '#555555',
					    top: true, // 展示在最上层
					},
					label: {
						fill: '#555555'
					}  
				});
				chart.axis(this.chartData.y, {
					grid: null,
					label: {
						fill: '#555555'
					}  
				});
				chart.line().shape('smooth').position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color);
				chart.legend({
				  custom: true,
				  align: 'center',
				  wordSpace: 10,
				   items: [{
				      name: this.chartData.name,
				      marker:(x, y, r, ctx) => {
						r = 4;
						ctx.lineWidth = 2;
						ctx.fillStyle = this.chartData.color;
						ctx.strokeStyle =  this.chartData.color;
						ctx.moveTo(x - r - 8, y);
						ctx.lineTo(x - r - 2, y);
						ctx.stroke();
						ctx.moveTo(x + r, y);
						ctx.lineTo(x + r + 2, y);
						ctx.stroke();
						ctx.arc(x - 3, y, r, 0, Math.PI * 2, false);
						ctx.stroke();
					  },
				    }]
				});
				chart.tooltip({
					showTitle: true,
					background: {
					  radius: 4,
					  fill: '#ffffff',
					  padding: [ 6, 10 ],
					  shadowColor: 'rgba(0, 0, 0, 0.2)',
					  shadowBlur: 20
					},
					titleStyle: {
					  fontSize: 14,
					  fill: '#555555',
					  textAlign: 'start',
					  textBaseline: 'top'
					},
					nameStyle: {
					  fontSize: 14,
					  fill: '#555555',
					  textAlign: 'start',
					  textBaseline: 'middle'
					},
					valueStyle: {
					  fontSize: 14,
					  fill: '#555555',
					  textAlign: 'start',
					  textBaseline: 'middle'
					},
					onShow:(obj) => {
						obj.items.splice(1,1);
						obj.items[0].name = this.chartData.name;
						obj.items[0].value += this.chartData.unit;
						
					}
				});
				chart.scale(this.chartData.x,{
					tickCount: 12,
				})
				chart.scale(this.chartData.y,{
					min: 0,
				})
				chart.area().position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color).shape('smooth');
				chart.point().position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color).style(this.chartData.y, {
					  stroke: this.chartData.color,
					  lineWidth: 2,
					  fill: '#FFF',
					  r: function r(val) {
					    return 3;
					  }
				})
				chart.render();
				return chart
			}
		}
	}
</script>

<style scoped>
	.charts {
			width: 100%;
			height: 100%;
		}
</style>
